@charset "utf-8";

/*
cc act
Author: jibin
Author mail: hojibin@126.com
Version: 1.0
-------------------------------------------------------------- */

/* Table of Content
==================================================
        - Reset      -
        - Loading    -
        - Common     -
        - Container  -
        - Responsive -
*/

/* - Reset ------------------------------------------------------- */
html {
    color: #333;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body {
    font-family: sans-serif;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, hr, button, article, aside, details, footer, header, menu, nav, section, audio, canvas, progress, video, svg {
    margin: 0;
    padding: 0;
}

div, section, p, h1, h2, h3, h4, h5, h6, ul li, ol li.fix-break {
    background: tranparent url('about:blank');
    word-break: break-all;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img, a img {
    border: 0;
}

ol, ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 500;
}

a {
    background: transparent;
}

a:active, a:hover {
    outline: 0;
    text-decoration: underline;
}

b, strong {
    font-weight: bold;
}

sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -.5em;
}

hr {
    box-sizing: content-box;
    height: 0;
}

button {
    overflow: visible;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: button;
}

button[disabled] {
    cursor: default;
}

/* - Loading ------------------------------------------------------- */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #14172a;
    z-index: 9999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

.status {
    width: 2.730667rem;
    height: 2.730667rem;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -1.365333rem 0 0 -1.365333rem;
}

.loading {
    width: 100%;
    height: 100%;
    position: relative;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff url(../img/logo-app.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* - Common ------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
}

html {
    font-size: 46.875px;
    background: #f2cb48 url(../img/bg.jpg) no-repeat center top;
    background-size: cover;
}

body {
    width: 16rem;
    margin: 0 auto;
    line-height: 1.4;
    color: #826824;
}

a {
    color: #fff;
    text-decoration: none;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #ff7316;
    border-color: #ff7316;
    border-radius: 16.0rem;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn.active,
.btn:active.focus,
.btn.active.focus {
    outline: 0 none;
    text-decoration: none;
    color: #fff;
    background-color: #ff7316;
    border-color: #ff7316;
    background-image: none;
    -webkit-box-shadow: inset 0 0.064rem 0.106667rem rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 0.064rem 0.106667rem rgba(0, 0, 0, 0.125);
}

.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:focus,
.btn[disabled]:focus,
.btn.disabled.focus,
.btn[disabled].focus,
.btn.disabled:active,
.btn[disabled]:active,
.btn.disabled.active,
.btn[disabled].active {
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #aa9f83;
    background-color: #eee1bd;
    border-color: #eee1bd;
}

.btn-sm {
    font-size: 0.512rem;
    padding: 0.256rem 0.554667rem;
}

.btn-lg {
    font-size: 0.810667rem;
    padding: 0.426667rem 2.133333rem;
}

.btn-info {
    background-color: #fda213;
    border-color: #fda213;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:active:focus,
.btn-info.active:focus,
.btn-info.focus,
.btn-info.active,
.btn-info:active.focus,
.btn-info.active.focus {
    outline: 0 none;
    text-decoration: none;
    color: #fff;
    background-color: #fda213;
    border-color: #fda213;
    background-image: none;
    -webkit-box-shadow: inset 0 0.064rem 0.106667rem rgba(0, 0, 0, 0);
    box-shadow: inset 0 0.064rem 0.106667rem rgba(0, 0, 0, 0);
}

/* icon */
@font-face {
    font-family: "icon";
    src: url("../font/icon.eot"); /* IE9*/
    src: url("../font/icon.eot#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../font/icon.woff") format('woff'), /* chrome, firefox */ url("../font/icon.ttf') format('truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url("../font/icon.svg#icon") format('svg'); /* iOS 4.1- */
}

.icon {
    font-family: "icon" !important;
    font-size: 0.533333rem;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.icon-voice:before {
    content: "\e640";
}

.icon-angle:before {
    content: "\e604";
}

.icon-pause:before {
    content: "\e67b";
}

.icon-play:before {
    content: "\e6a3";
}

.icon-speak:before {
    content: "\e664";
}

.icon-close:before {
    content: "\e659";
}

@font-face {
    font-family: "font";
    src: url("../font/font.eot"); /* IE9 */
    src: url("../font/font.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../font/font.woff") format("woff"), /* chrome、firefox */ url("../font/font.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("../font/font.svg#font") format("svg"); /* iOS 4.1- */
}

.font {
    font-family: "font" !important;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* font */
.f14 {
    font-size: 14px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}

/* align */
.al {
    text-align: left;
}

.ac {
    text-align: center;
}

.ar {
    text-align: right;
}

.aj {
    text-align: justify;
}

/* positon */
.pos-r {
    position: relative;
}

.pos-a {
    position: absolute;
}

.pos-f {
    position: fixed;
}

/* color */
.text-danger {
    color: #e23435;
}

/* padding */
.pdt20 {
    padding-top: 0.266667rem;
}

/* margin */
.mgt20 {
    margin-top: 0.266667rem;
}

/* float */
.fl {
    float: left;
}

.fr {
    float: right;
}

/* img */
.img-rp {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-contain {
    object-fit: contain;
}

.img-cover {
    object-fit: cover;
}

/* background */
.bg-w {
    background-color: #fff;
}

.bg-g {
    background-color: #f0f0f6;
}

/* grid */
.cf:before, .cf:after, .r:before, .r:after {
    display: table;
    content: ' ';
}

.cf:after, .r:after {
    clear: both;
}

.g-xs-1, .g-sm-1, .g-xs-2, .g-sm-2, .g-xs-3, .g-sm-3, .g-xs-4, .g-sm-4, .g-xs-5, .g-sm-5, .g-xs-6, .g-sm-6,
.g-xs-7, .g-sm-7, .g-xs-8, .g-sm-8, .g-xs-9, .g-sm-9, .g-xs-10, .g-sm-10, .g-xs-11, .g-sm-11, .g-xs-12, .g-sm-12 {
    position: relative;
    min-height: 1px;
}

.r > [class*='g-'] {
    float: left;
}

.g-xs-12 {
    width: 100%;
}

.g-xs-11 {
    width: 91.66666667%;
}

.g-xs-10 {
    width: 83.33333333%;
}

.g-xs-9 {
    width: 75%;
}

.g-xs-8 {
    width: 66.66666667%;
}

.g-xs-7 {
    width: 58.33333333%;
}

.g-xs-6 {
    width: 50%;
}

.g-xs-5 {
    width: 41.66666667%;
}

.g-xs-4 {
    width: 33.33333333%;
}

.g-xs-3 {
    width: 25%;
}

.g-xs-2 {
    width: 16.66666667%;
}

.g-xs-1 {
    width: 8.33333333%;
}

@media (min-width: 400px) {
    .g-sm-12 {
        width: 100%;
    }

    .g-sm-11 {
        width: 91.66666667%;
    }

    .g-sm-10 {
        width: 83.33333333%;
    }

    .g-sm-9 {
        width: 75%;
    }

    .g-sm-8 {
        width: 66.66666667%;
    }

    .g-sm-7 {
        width: 58.33333333%;
    }

    .g-sm-6 {
        width: 50%;
    }

    .g-sm-5 {
        width: 41.66666667%;
    }

    .g-sm-4 {
        width: 33.33333333%;
    }

    .g-sm-3 {
        width: 25%;
    }

    .g-sm-2 {
        width: 16.66666667%;
    }

    .g-sm-1 {
        width: 8.33333333%;
    }
}

/* - Container ------------------------------------------------------- */

/* intro */
.act-intro {
    margin: 0.64rem 0.853333rem 0.533333rem 0;
}

.bg-begin {
    width: 100%;
    height: 21.568rem;
    background: url(../img/bg-begin.png) no-repeat center top;
    background-size: contain;
}

.bg_month {
    width: 70%;
    height: 10rem;
    background: url(../img/mouth.gif) no-repeat center top;
    background-size: contain;
    z-index: 100;
    position: absolute;
    top: 7.426667rem;
    left: 2.826667rem;
}

.act-prize {
    position: absolute;
    width: 100%;
    top: 16.853333rem;
    z-index: 2;
}

.act-prize-title {
    font-size: 0.682667rem;
}

.act-prize-money {
    margin: 0.426667rem 0 1.706667rem 1.237333rem;
}

.act-prize-money strong {
    display: inline-block;
    background: #fffcfc;
    font-size: 1.152rem;
    border-radius: 0.106667rem;
    padding: 0.213333rem 0.32rem;
    margin-right: 0.4rem;
}

.act-prize-money sapn {
    font-size: 0.768rem;
}

/* popmod */
.popmod {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    opacity: 0;
    pointer-events: none;
}

.popwrap {
    margin: 0 auto;
    width: 14.122667rem;
    padding-top: 1.066667rem;
    position: relative;
    top: 1.066667rem;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    opacity: 1;
}

.popup-active {
    pointer-events: auto;
}

.popup-in {
    z-index: 100;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.popup-in .popwrap {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.popup-out {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.act-intro-hd {
    height: 4.053333rem;
    background: url(../img/bg-intro-hd.png) no-repeat center top;
    background-size: contain;
    text-align: right;
}

.act-intro-hd .icon-close {
    font-size: 1.066667rem;
    color: #3e3e3e;
    margin: 0.746667rem 0.32rem 0 0;
}

.act-intro-bd {
    background: url(../img/bg-intro-bd.png) no-repeat center bottom;
    background-size: cover;
    padding: 0 1.066667rem 1.2rem;
    position: relative;
    top: -0.213333rem;
}

.act-intro-bd dl {
    overflow-y: auto;
    height: 14.853333rem;
}

.act-intro-bd dl dt {
    font-size: 0.554667rem;
    color: #000;
    margin-top: 0.64rem;
}

.act-intro-bd dl dd {
    font-size: 0.554667rem;
    color: #797979;
    margin-top: 0.106667rem;
    text-align: justify;
}

.act-intro-bd dl dd span {
    color: #ff7316;
}

/* record */
.act-title-tips {
    font-size: 0.512rem;
    color: #87670e;
}

.record-box {
    width: 15.104rem;
    background: url(../img/bg-record.png) no-repeat center top;
    background-size: contain;
    margin: 0.426667rem auto 0.426667rem;
    padding-top: 0.810667rem;
}

.voice-box {
    margin: 0 0.533333rem;
    height: 5rem;
    overflow: hidden;
}

/
/
.voice-box ul {
/ / transition: margin-top 0.5 s;
/ / -webkit-transition: margin-top 0.5 s;
/ /
}

.voice-box ul li {
    margin-bottom: 100rem;
}

.voice-box ul li .voice-box-itemshadow {
    width: 100%;
    background: #fff;
    padding: 0.32rem 0.5rem 0.5rem;
    border-radius: 0 0 0.426667rem 0.426667rem;
    margin-bottom: 0.042667rem;
}

.voice-box-item {
    background: #fff;
    padding: 0.32rem 0.5rem 0.5rem;
    border-radius: 0.426667rem;
    margin-bottom: 0.426667rem;
}

.voice-box-role {
    /*height: 1.408rem;*/
    line-height: 1.408rem;
    overflow: hidden;
    margin-bottom: 0.426667rem;
}

.voice-box-role .voice-pic {
    display: inline-block;
    width: 1.408rem;
    height: 1.408rem;
    overflow: hidden;
    background-color: #f4f4f3;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 0.32rem;
}

.voice-box-role .voice-pic img {
    width: 100%;
}

.voice-box-role .voice-name {
    display: inline-block;
    font-size: 0.469333rem;
    color: #b7b7b7;
    vertical-align: middle;
    margin-left: 0.213333rem;
}

.voice-play {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
}

.voice-play .icon-voice {
    color: #ff7316;
    font-size: 1.4rem;
    line-height: 1;
}

.voice-play span {
    color: #ccc;
    font-size: 0.64rem;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -2px;
    left: -0.426667rem;
}

.voice-play .icon-voice:before {
    position: relative;
    top: 0.256rem;
}

.voice-box-item-txt {
    font-size: 0.512rem;
    border-top: 1px solid #dcdcdc;
    color: #959595;
    padding: 0.5rem 0.32rem 0;
    overflow: hidden;
}

.voice-box-item-txt span {
    display: block;
    width: 100%;
    text-align: justify;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.btn-select-wrap {
    margin: 0.32rem 0.533333rem 0 0;
}

.btn-select-wrap .btn-info {
    padding: 0.24rem 0.8rem;
}

.record-voice-control .btn-reload {
    position: absolute;
    right: 0.853333rem;
    top: 4.48rem;
    width: 2.773333rem;
    height: 2.773333rem;
    line-height: 2.773333rem;
    overflow: hidden;
    border-radius: 50%;
    font-size: 0.512rem;
}

.record-voice-time {
    font-size: 0.853333rem;
    font-weight: 200;
}

.record-voice-control .btn-record {
    display: inline-block;
    width: 7.466667rem;
    height: 7.466667rem;
    overflow: hidden;
    margin: 0 auto 1.066667rem;
    text-decoration: none;
}

.icon-wrap {
    width: 4.586667rem;
    height: 4.586667rem;
    line-height: 4.586667rem;
    border-radius: 50%;
    background-color: #ff7316;
    overflow: hidden;
    margin: 1.3333rem auto 0;
    position: relative;
    z-index: 100;
    cursor: pointer;
}

.icon-wrap .icon {
    font-size: 1.92rem;
}

.icon-wrap .icon-play {
    margin-left: .4rem;
}

@keyframes warn1 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.5;
    }
    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes warn2 {
    0% {
        transform: scale(0.2);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.2);
        -webkit-transform: scale(0.3);
        opacity: 0.5;
    }
    50% {
        transform: scale(0.4);
        -webkit-transform: scale(0.4);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.0;
    }
}

@keyframes warn3 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0.0;
    }
    25% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    50% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.9);
        ∂ -webkit-transform: scale(0.9);
        opacity: 0.0;
    }
}

/* 产生动画（向外扩散变大）的圆圈  */
.rpulse1 {
    border: 3px solid rgba(254, 157, 17, 0.5);
    box-shadow: 1px 1px 30px rgba(254, 157, 17, 0.5);
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
}

.rpulse2 {
    border: 6px solid rgba(254, 157, 17, 0.5);
    box-shadow: 1px 1px 30px rgba(254, 157, 17, 0.5);
    background-color: rgba(254, 157, 17, 0.5);
    -webkit-animation: warn2 2s ease-out;
    -moz-animation: warn2 2s ease-out;
    animation: warn2 2s ease-out;
}

.rpulse3 {
    border: 6px solid rgba(254, 157, 17, 0.5);
    box-shadow: 1px 1px 30px rgba(254, 157, 17, 0.5);
    background-color: rgba(254, 157, 17, 0.5);
    -webkit-animation: warn3 2s ease-out;
    -moz-animation: warn3 2s ease-out;
    animation: warn3 2s ease-out;
}

.rpulse {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.rpulse1, .rpulse2, .rpulse3 {
    visibility: hidden;
}

.animate .rpulse1, .animate .rpulse2, .animate .rpulse3 {
    visibility: visible;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.btn-record-txt {
    font-size: 0.64rem;
    color: #a67201;
    margin-top: 0.5rem;
}

.animate .btn-record-txt {
    opacity: 1;
}

/* user */
.act-title {
    font-size: 1.152rem;
    color: #ff7316;
    margin: 1.066667rem 0 0.213333rem;
}

.user-title-tips {
    width: 8.768rem;
    height: 0.512rem;
    background: url(../img/user-title-tips.png) no-repeat center top;
    background-size: contain;
    margin: 0 auto 0.533333rem;
}

.user-score-wrap {
    width: 15.104rem;
    height: 1.28rem;
    background: url(../img/bg-user-mouth.png) no-repeat center top;
    background-size: contain;
    margin: 0 auto;
    padding-top: 1.28rem;
}

.user-score {
    width: 16.122667rem;
    height: 14.693333rem;
    background: url(../img/bg-mouth@2x.png) no-repeat center top;
    background-size: contain;
    margin: 0 auto 0.426667rem;
}

.act-prize-btn {
    margin-top: 3.133333rem;
}

.user-score .user {
    padding-top: 3.5rem;
}

.user .user-pic {
    width: 1.706667rem;
    height: 1.706667rem;
    overflow: hidden;
    margin: 0 auto 0.106667rem;
    border-radius: 16rem;
}

.user .user-pic img {
    width: 100%;
}

.user .user-name {
    font-size: 0.426667rem;
    color: #333;
    margin-bottom: 0.32rem;
}

.user-score .score .score-title, .user-score .score .score-number {
    line-height: 1;
}

.user-score .score .score-title {
    font-size: 1.28rem;
}

.user-score .score .score-number strong {
    font-size: 2.133333rem;
}

.user-score .score .score-number span {
    font-size: 1.749333rem;
    position: relative;
    top: -0.106667rem;
}

.voice-item a {
    display: block;
    height: 1.493333rem;
    line-height: 1.493333rem;
    overflow: hidden;
    margin: 0.426667rem 0;
}

.voice-item .icon-voice {
    color: #ff7316;
    font-size: 1.493333rem;
    line-height: 1;
}

.voice-item span {
    color: #ccc;
    font-size: 0.64rem;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -0.32rem;
    left: -0.426667rem;
}

.voice p {
    color: #646464;
    font-size: 0.426667rem;
}

.voice p .qrcode-pic-small {
    display: inline-block;
    width: 1.304rem;
    height: 1.304rem;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    left: 0.533333rem;
    bottom: 0.428rem;
}

.voice p .qrcode-pic-small img {
    width: 100%;
    height: 100%;
}

/* qrcode */
.act-qrcode {
    width: 15.104rem;
    height: 15.018667rem;
    background: url(../img/bg-qrcode.png) no-repeat center top;
    background-size: contain;
    margin: 0 auto 0.426667rem;
}

.act-qrcode .qrcode-pic-lg {
    width: 6.613333rem;
    height: 6.613333rem;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    top: 5.333333rem;
}

.act-qrcode .qrcode-pic-lg img {
    width: 100%;
}

/* rank */
.rank .pic-voice {
    width: 3.669333rem;
    height: 3.221333rem;
    background: url(../img/pic-voice.png) no-repeat center top;
    background-size: contain;
    margin: 0.64rem auto 0;
}

.rank .act-title {
    margin-top: 0.213333rem;
}

.rank .top-box {
    width: 14.122667rem;
    margin: 0 auto;
    padding-top: 0.426667rem;
}

.rank .top-box-item {
    background: #efefef;
    padding: 0.32rem 0.5rem;
    border-radius: 0.426667rem;
    margin-bottom: 0.128rem;
}

.rank .top-box-role {
    height: 1.5rem;
    line-height: 1.5rem;
    overflow: hidden;
}

.rank .top-box-role .voice-pic {
    display: inline-block;
    width: 1.408rem;
    height: 1.408rem;
    overflow: hidden;
    background-color: #f4f4f3;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 1.65rem;
}

.rank .top-box-role .voice-pic img {
    width: 100%;
}

.rank .top-box-role .voice-name {
    display: inline-block;
    font-size: 0.469333rem;
    color: #5c5c5c;
    vertical-align: middle;
    line-height: 1;
    width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank .top-box-role .top-me {
    color: #d1443e;
    margin-left: 0;
}

.rank .top-box-role .top-me .top-merank {
    color: #b7b7b7;
    display: inline-block;
    margin-top: 0.106667rem;
}

.rank .voice-play {
    display: block;
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
    right: 3.3rem;
    top: 0.106667rem;
    text-align: right;
}

.rank .voice-play .icon-voice {
    color: #ff7316;
    font-size: 1.2rem;
    line-height: 1;
    position: relative;
    top: -0.256rem;
    left: 0.533333rem;
}

.rank .voice-play span {
    color: #ccc;
    font-size: 0.64rem;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -0.32rem;
    left: -0.426667rem;
}

.user-rank {
    display: inline-block;
    font-size: 0.512rem;
    color: #b8b8b8;
    position: absolute;
    right: 0.793333rem;
    top: 0.106667rem;
    text-align: right;
}

.rank .top-box ol {
    width: 100%;
    height: 11.52rem;
    padding: 0 0.853333rem;
    background: url(../img/bg-rank.png) no-repeat center top;
    background-size: contain;
    counter-reset: sectioncounter;
    overflow-y: auto;
    position: relative;
    padding-bottom: 0.853333rem;
    margin-bottom: 1.066667rem;
}

.top-box .sc-jian {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 0.853333rem;
    content: '';
    background-color: #efefef;
    background-image: url("../img/icon-down.png");
    background-repeat: no-repeat;
    background-size: 0.7rem 0.7rem;
    background-position: top center;
    border-radius: 0 0 0.32rem 0.32rem;
}

.top-box .sc-block {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 0.853333rem;
    background-color: #efefef;
    content: '';
    border-radius: 0 0 0.32rem 0.32rem;
}

.rank .top-box ol li {
    list-style-position: inside;
    position: relative;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.32rem;
}

.rank .top-box ol li:before {
    font-size: 0.512rem;
    color: #b8b8b8;
    position: absolute;
    left: 0.426667rem;
    top: 0.75rem;
    content: counter(sectioncounter) "、";
    counter-increment: sectioncounter;
}

.rank .top-box ol li .top-box-item {
    background: transparent;
    padding: 0.32rem 0 0 1rem;
    border-radius: 0;
    margin-bottom: 0;
}

.rank .top-box ol li .top-box-item .user-rank {
    display: inline-block;
    font-size: 0.512rem;
    color: #b8b8b8;
    position: absolute;
    right: 0.453333rem;
    top: 0.106667rem;
    text-align: right;
}

.rank .top-box ol li .top-box-item .voice-play {
    display: block;
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
    right: 3rem;
    top: 0.106667rem;
    text-align: right;
}

.rank .top-box ol li .top-box-item .top-box-role .voice-pic {
    display: inline-block;
    width: 1.408rem;
    height: 1.408rem;
    overflow: hidden;
    background-color: #f4f4f3;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 0.32rem;
}

.rank ol li .top-box-role .voice-name {
    margin-left: 0.32rem;
}

.rank .voice-play .icon-voice {
    left: 0.72rem;
    top: 0.042667rem;
}

.rank ol li .voice-play .icon-voice {
    top: 0.064rem;
    left: 0.469333rem;
}

.rank .voice-play .voice_no {
    width: 1.066667rem;
    top: -0.213333rem;
    text-align: left;
    left: -0.106667rem;
}

.rank .voice-play {
    text-decoration: none;
}

.rank .top-box-role .icon img {
    width: 0.533333rem;
    height: 0.618667rem;
    position: absolute;
    top: 0.106667rem;
    left: -0.426667rem;
}

.rank .top-user-info .icon img {
    position: absolute;
    top: 0.085333rem;
    left: -0.128rem;
}

.record-box .voice-play .icon {
    font-size: 1.2rem;
    position: relative;
    top: -0.056rem;
    left: 0;
}

.record-box .voice-play .icon img {
    position: absolute;
    top: -0.512rem;
    left: -0.853333rem;
}

/* - Responsive ------------------------------------------------------- */

/* small */
@media screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2) {
    .act-intro-bd dl {
        height: 8.853333rem;
    }

    .act-prize-btn {
        margin-top: 1.133333rem;
    }

    .voice-box {
        height: 4.7rem;
    }
}

/* android */
@media screen and (device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
    .act-intro-bd dl {
        height: 8.853333rem;
    }

    .act-prize-btn {
        margin-top: 1.133333rem;
    }
}

/* ip5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .act-intro-bd dl {
        height: 15.853333rem;
    }
}

/* i6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {

}

/* i6p */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
    .act-intro-bd dl {
        height: 15.853333rem;
    }
}